<template>
  <div>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <!--文本框-->
      <el-form-item>
        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
      </el-form-item>
      <!--文本框-->
      <el-form-item>
        <el-input v-model="dataForm.ip" placeholder="IP" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="dataForm.bDate" type="date" :placeholder="$t('beginDate')" value-format="yyyy-MM-dd" style="width: 160px">
        </el-date-picker>
        -
        <el-date-picker v-model="dataForm.eDate" type="date" :placeholder="$t('endDate')" value-format="yyyy-MM-dd" style="width: 160px">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList()">{{ $t('query') }}</el-button>
        <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
      </el-form-item>
    </el-form>

    <vxe-toolbar :setting="{immediate:true}">
      <template v-slot:buttons>
      </template>
      <template v-slot:tools>
        <!-- <el-button icon="el-icon-search" @click="searchShowHandle()" circle></el-button> -->
        <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
        <el-dropdown trigger="click" style="padding-left: 5px;" placement="bottom">
          <el-button icon="el-icon-download" circle>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-bottom" @click.native="exportHandle(true)">导出当前页</el-dropdown-item>
            <el-dropdown-item icon="el-icon-download" @click.native="exportHandle()">全部导出
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </vxe-toolbar>
    <div class="aui-card-list-body-table">
      <vxe-table ref="xTable" :loading="dataListLoading" class="vxe-table-element" auto-resize @select-change="dataListSelectionChangeHandleVex" @select-all="dataListSelectionAllChangeHandleVex" :data="dataList" max-height="auto">
        <vxe-table-column type="index" align="center" width="40"></vxe-table-column>
        <vxe-table-column field="userName" width="120" title="用户名">
        </vxe-table-column>
        <vxe-table-column field="operaMenuName" width="120" title="功能名称">
        </vxe-table-column>
        <vxe-table-column field="operaUrl" title="访问URL">
        </vxe-table-column>
        <vxe-table-column field="operaAction" title="行为" width="120">
          <template slot-scope="scope">
            {{$getDictLabel('USER_BEHAVIOR_TYPE', scope.row.operaAction)}}
          </template>
        </vxe-table-column>

        <vxe-table-column field="userAgent" title="logOperation.Browser" width="80">
          <template slot-scope="scope">
            {{ userAgent(scope.row.userAgent).browser }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="userAgent" title="logOperation.OS" width="140">
          <template slot-scope="scope">
            {{ userAgent(scope.row.userAgent).os }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="ip" width="120" title="操作IP">
        </vxe-table-column>
        <vxe-table-column width="160" field="createDate" title="访问时间">
        </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import { fnUserAgent } from '@/utils/ua'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      searchShow: true,
      mixinViewModuleOptions: {
        getDataListURL: '/sys/sysLogUserBehavior/page',
        getDataListIsPage: true,
        deleteURL: '/sys/sysLogUserBehavior',
        deleteIsBatch: true,
        exportURL: '/sys/sysLogUserBehavior/export'
      },
      show: '1',
      tableHeightHold: 42 + 52,
      dataForm: {
        operaMenuId: '',
        // realName: '',
        ip: '',
        bDate: null,
        eDate: null
      }
    }
  },
  components: {
  },
  methods: {
    change (e) {
      this.getDataList()
    },
    // 识别设备
    userAgent (userAgent) {
      return fnUserAgent(userAgent)
    }
  }
}
</script>
